<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.$events.js">
            
        </script>
        <script>
           var model = avalon.define({
                $id:"test",
                array: ["aaa", "bbb", "ccc"],
                currentIndex: 0,
                active: function($index){
                    model.currentIndex = $index
                }
            })
        </script>
        <style>
            .panel {
                border: 1px solid  red;
                width:400px;
                height: 200px;
            }
        </style>
    </head>
    <body ms-controller="test">
        <div>
            <button ms-repeat="array" ms-mouseenter="active($index)" ms-class="$index === currentIndex">{{el}}</button>
        </div>
        <div ms-repeat="array" class="panel" ms-visible="$index === currentIndex">
          第{{$index +  1}}个面板:  <strong>{{el}}</strong> 
        </div>
    </body>
</html>
